import React, { Component } from 'react';
import './table.css';

class TableL extends Component {
  state = {
    hover: "",
    filter: "",
    delete_list: [],
    deleteAllChecked: false,
  }
  handleMouseOver = (id) => {
    this.setState({
      hover: id
    })
  }
  handleMouseOut = () => {
    this.setState({
      hover: "",
    })
  }
  selectData = (id, event) => {
    let tmp_data = [...this.props.data]
    let delete_id = []
    for(let i = 0; i < tmp_data.length; i++) {
      if(id === tmp_data[i].id) {
        tmp_data[i].checked = event.target.checked
      }
    }
    let true_m = 0
    for(let i = 0; i < tmp_data.length; i++) {
      if(true === tmp_data[i].checked) {
        true_m += 1
        delete_id.push(tmp_data[i].id)
      }
    }
    let flag = true_m === tmp_data.length ? true : false
    this.setState({
      deleteAllChecked: flag,
      delete_list: delete_id,
    })
  }
  selectAllData = (event) => {
    let tmp_data = [...this.props.data]
    let delete_id = []
    for(let i = 0; i < tmp_data.length; i++) {
      tmp_data[i].checked = event.target.checked
      if(event.target.checked){
        delete_id.push(tmp_data[i].id)
      }
    }
    this.setState({
      deleteAllChecked: event.target.checked,
      delete_list: delete_id,
    })
  }
  batch_delete = () => {
    let tmp_data = [...this.props.data];
    for(let i = 0; i < tmp_data.length; i++) {
      tmp_data[i].checked = false;
    }
    this.setState({
      deleteAllChecked: false,
      delete_list: [],
    })
    this.props.deleteData(this.state.delete_list);
  }
  filterQuery = (e) => {
    this.setState({
      filter: e.target.value,
    })
  }
  isShow = (item) => {
    let value = this.state.filter;
    let filter = this.props.filter;
    if (value === "") {
      return true;
    }
    for(let i= 0; i < filter.length; i++) {
      if(item[filter[i]].indexOf(value) !== -1) {
        return true;
      }
    }
    return false;
  }
  render() {
    var head = this.props.head;
    var data = this.props.data;
    var id_count = 0;
    var thead = head.map(h => {
      id_count += 1;
      return (
        <th className={'thStyle'} key = {id_count}>{ h.ch }</th>
      )
    })
    var tbody = data.map(d => {
      id_count += 1;
      if(!this.isShow(d)) return "";
      return (
        <tr
          className={
            undefined !== d.checked && true === d.checked ?
            'trDelStyle' :
              d.id === this.state.hover ? 'trHoverStyle' :'trStyle'}
          key = {id_count}
          onMouseOver={() => this.handleMouseOver(d.id)} >
          <td className={'tdStyle'} key={id_count}>
            { undefined !== this.props.deleteData ?
            <input
              type='checkbox'
              id={d.id} onChange = {(e) => this.selectData(d.id, e)}
              checked={undefined === d.checked ? false : d.checked} /> :
              <span></span>}
            <span>{d.id}</span>
          </td>
          { head.map(h => {
            id_count += 1;
            return (
              <td className={'tdStyle'} key={id_count}>{d[h.en]}</td>
            )
          })}
        </tr>
      )
    })
    return (
      <div align="center">
      <table>
      <tbody>
      <tr>
      <td>
        <input type="text" onChange={this.filterQuery} size="12" maxLength="12"></input>
      </td>
      <td>
      {0 !== this.state.delete_list.length ?
        <button onClick={this.batch_delete}>{this.props.deleteName}</button> : <div></div>}
      </td>
      </tr>
      </tbody>
      </table>
      <table className={'tableStyle'}>
      <thead>
      <tr>
      <th className={'thStyle'}>
        { undefined !== this.props.deleteData ?
        <input
          type='checkbox'
          onChange = {this.selectAllData}
          checked={this.state.deleteAllChecked} /> :
          <span></span>}
        <span>no.</span>
      </th>
      { thead }
      </tr>
      </thead>
      <tbody onMouseOut={this.handleMouseOut}>{ tbody }</tbody>
      </table>
      </div>
    );
  }
};

export default TableL;
